<template>
    <div>
        <el-row>
            <el-col :span="24" align="right">
<!--                <el-button type="primary" @click="addPeople()">关联成果</el-button>-->
            </el-col>
        </el-row>
        <Table :tableArr="unitList" :pagination="data.page" :columns="data.columns">
            <template #operate="{ row }">
<!--                <el-button size="small" class="ordinary" @click="handleEdit(row)">编辑</el-button>-->
<!--                <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>-->
            </template>
        </Table>

        <el-dialog v-model="data.addPeople" append-to-body width="800px" top="10vh" :show-close="false"
            :close-on-click-modal="false">
            <template #title>
                <div class="my-header">
                    <el-tabs v-model="data.activeName" class="demo-tabs">
                        <el-tab-pane label="关联成果" name="first">
                            <el-form  ref="DiaForm"  append-to-body width="800px"
                                label-width="110px" top="10vh" :show-close="false" :close-on-click-modal="false">
                                <el-row :gutter="40">
                                    <el-col :span="12">
                                        <el-form-item label="成果类型:">
                                            <SelectOption :selectValue="form.outcomeTypeId" :options="data.options"
                                                @change-value="changeValue0" :disabled="1" >
                                            </SelectOption>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="成果名称:">

                                            <SelectOption :selectValue="form.outcomeName" :options="data.resultList"
                                                @change-value="changeValue1"  :disabled="1" >
                                            </SelectOption>

                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </template>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="data.addPeople = false">关闭</el-button>
<!--                    <el-button type="primary" @click="save()">保存</el-button>-->
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { queryNameById } from "@/views/science/api/technologyawards";
import common from "@/views/science/common/common.json";
import PopupTreeInput from "@/views/science/components/PopupTreeInput/index.vue";
import SelectOption from "@/views/science/components/selectOption/index.vue";
import Table from "@/views/science/components/table/table.vue";
import { tips } from "@/views/science/components/tips/tips";
import { reactive, ref, watch } from "vue";

export default {
    components: {
        Table,
        SelectOption,
        PopupTreeInput,
    },
    emits: {
        dataChange: null,
        paramsChange: null,
    },
    props: {
        members: {
            type: Array,
            required: true,
        },
        membersFlag: {
            type: Boolean,
            required: true,
        },
    },
    setup(props, { emit }) {
        let DiaForm = ref();
        const value = ref([]);
        let data = reactive({
            activeName: ref("first"),
            columns: common.platformResultInfoHeader,
            page: {
                page: 1,
                limit: 10,
                total: 0,
            },
            addPeople: false,
            resultList: [],

            options: [
                { id: "2", name: "发明专利" },
                { id: "6", name: "学术论著" },
                { id: "7", name: "学术论文" },
            ],

            usersSelet: [],
            roleList: [],
            deptForm: {
                parentId: 0,
                parentName: "",
            },
            addType: "add", //add or edit
            editItem: {}, //当前编辑的人员
        });
        const unitList = reactive([] as any);



        const form = reactive({

            outcomeId: '',
            outcomeName: '',

            outcomeTypeId: "",
            outcomeTypeName: '',
            projectId:''
        });

        const changeValue0 = async (item) => {

            form.outcomeTypeId = item.id;
            form.outcomeTypeName = item.name;

            form.outcomeId = '';
            form.outcomeName = '';

            queryNameById({ relatetype: item.id }).then((res) => {

                data.resultList = res.data.data;
            });
        };

        let changeValue1 = async (item) => {

            console.log(item,'changeValue1');


            form.outcomeName = item.name
            form.outcomeId = item.id
            form.projectId = item.projectId
        }
        //添加人员
        const addPeople = () => {
            data.addPeople = true;
            data.addType = "add";
        };
        //编辑人员
        const handleEdit = (row) => {

            form.outcomeId = row.outcomeId,
                form.outcomeName = row.outcomeName,
                form.outcomeTypeId = row.outcomeTypeId,

                form.outcomeTypeName = row.outcomeTypeName,



                queryNameById({ relatetype: row.outcomeTypeId }).then((res) => {
                    data.resultList = res.data.data;
                });
            data.addPeople = true;
            data.addType = "edit";
            data.editItem = row;
        };
        //保存
        const save = async () => {


            if (data.addType == "add") {

                if (!form.outcomeTypeId) {
                    return tips("请选择获奖类型!", "warning");
                }

                if (!form.outcomeId) {
                    return tips("请选择获奖名称!", "warning");
                }
                unitList.unshift(JSON.parse(JSON.stringify(form)));
            } else {
                var index = unitList.indexOf(data.editItem);

                console.log(index);

                if (index > -1) {
                    unitList[index] = JSON.parse(JSON.stringify(form));
                }
            }

            emit("paramsChange", unitList);

            data.addPeople = false;

            form.outcomeId = '';
            form.outcomeName = '';
            form.outcomeTypeId = '';
            form.outcomeTypeName = '';
        };


        //删除
        const handleDelete = async (row) => {
            var index = unitList.indexOf(row);
            console.log(index)
            if (index > -1) {
                //大于0 代表存在，
                unitList.splice(index, 1); //存在就删除
            }
            emit("paramsChange", unitList);
        };

        watch(
            () => props.members,
            (newValue, oldValue) => {
                if (props.membersFlag) {
                    unitList.length = 0;
                    if (newValue.length > 0) {
                        newValue.forEach((e) => {
                            unitList.unshift(e);
                        });
                    }
                }
            }
        );

        return {
            DiaForm,
            data,
            form,
            value,
            unitList,
            handleEdit,
            addPeople,
            close,
            handleDelete,
            save,
            changeValue0,
            changeValue1,

        };
    },
};
</script>

<style scoped lang="scss">
.demo-form-inline .el-form-item {
    width: 70%;
}

.el-select {
    width: 100%;
    margin: 0;
}
</style>
